<template>
    <el-dialog :model-value.sync="dialogVisible" width="480px" :before-close="handleClose">
        <template #title>
            <div class="my-header">
                <el-icon color="#FFB414" :size="16" style="vertical-align: middle">
                    <WarningFilled />
                </el-icon>
                <span>{{ title }}</span>
            </div>
        </template>
        <span>{{ content }}</span>
        <template #footer>
            <span class="dialog-footer">
                <slot></slot>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';

const emits = defineEmits(['onClose']);
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '',
    },
    content: {
        type: String,
        default: '',
    },
});
const handleClose = () => {
    emits('onClose');
};
</script>

<style lang="scss" scoped>
.my-header {
    span {
        padding-left: 10px;
    }
}
</style>
